import { WeaDialog, WeaNewScroll, WeaColorPicker, WeaFormItem, WeaCheckbox, WeaUpload, WeaSearchGroup,WeaInputNumber } from 'ecCom';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Upload, Icon, Modal, InputNumber } from 'antd';
import * as screenApis from '../../apis/screen.js'
import isEmpty from 'lodash/isEmpty';
const getKey = WeaTools.getKey;
import {WeaSwitch,WeaLogView} from 'comsMobx';
import { WeaLocaleProvider,  WeaTools,WeaHelpfulTip, } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

@inject('meetingDialog')
@observer
export default class Screen extends React.Component {
  constructor(props) {
    super(props);
    // this.state = {
    //   fontsize: '16',
    //   bgcolor: '#006699',
    //   fontcolor: '#ffffff',
    //   showhead: '1',
    //   showdep: '1',
    //   showsub: '1',
    //   shownum: '1',
    //   bgimg: '',
    //   cfg: {},
    // }
  }

  componentDidMount(nextProps) {
    //新建、编辑会议进来，参数初始化
    const { type, meetingid, meetingDialog } = this.props;
    

    screenApis.getScreenSet({ meetingid: meetingid }).then((result) => {
      meetingDialog.setScreenParams(result)
    })
    
    //meetingDialog.getOnlyMeetingSignSet({ meetingid: meetingid });


  }

  componentWillReceiveProps(nextProps) {
    const { meetingDialog } = this.props;
    const { meetingid } = nextProps;
    if (this.props.showScreen != nextProps.showScreen) {
      screenApis.getScreenSet({ meetingid: meetingid }).then((result) => {
        meetingDialog.setScreenParams(result)
      })
    }

  }

  //HelpfulTip设置
  getHelpfunTip = domKey => {
    const helpTip = {
      '2': getLabel('510318','输入0时，表示不限制签退时间。') ,
      '1': getLabel(514150,'输入0时，表示不限制签到时间。'),
    }
    if (Object.keys(helpTip).indexOf(domKey) > -1)
      return <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@l2py3n`} style={{'margin-left':'5px'}} title={helpTip[domKey]} />
  }

  getSearchs = () => {
    const { meetingDialog } = this.props;
    const { dialogStatus } = meetingDialog;
    const {
      fontsize = '16',
      bgcolor = '#006699',
      fontcolor = '#ffffff',
      showhead = '1',
      showdep = '1',
      showsub = '1',
      shownum = '1',
      bgimg = '',
      bgimgLoadlink = '',
      cfg = {},
      showtitle = '1',
      allowSignBack='1',
	    afterSignCanBack='5',
	    defaultAllowSignTime='5',
	    defaultAllowSignBackTime='30',
    } = toJS(meetingDialog.screenParams);
    const {fields} = toJS(dialogStatus);
    const uploadShow = isEmpty(cfg);
    let flag = allowSignBack == '1' ;
    let type = dialogStatus.type;
    let isScreenShow = dialogStatus.isScreenShow;
    let isSignSetShow = dialogStatus.isSignSetShow;
    let group = [];
    let items = [];
    
    //1、新建模式下，两个组都要显示
    //2、查看模式下，screen显示screen，sign显示sign
    items.push({
      com:(
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@3m1pkp@defaultAllowSignTime`}
          className={'defaultAllowSignTime'}
          label={getLabel(521083, '允许签到时间')}
          labelCol={{ span: '6', offset: '3' }}
          wrapperCol={{ span: '7' }}>
          <div style={{width:'230px'}}>
          {<span className='meeting-sign'>{getLabel('514053','会议开始前')}</span>}
          <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@p82alb@signTime`} 
            // style={{width:'230px'}}
            value={defaultAllowSignTime}
            onChange={(v) => {
              meetingDialog.setScreenParams({ defaultAllowSignTime: v }, () => {
                this.props.onChange && this.props.onChange(state);
              });
            }}
          />
          {<span className='canchange'>{getLabel('514054','分钟可以签到') }</span>}{this.getHelpfunTip('1')}
          </div>
        </WeaFormItem>
      )
    })
    items.push({
      com:(
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@uj7a84@allowSignBack`}
          className={'defaultAllowSignTime'}
          label={getLabel(520850, '启用会议签退')}
          labelCol={{ span: '6', offset: '3' }}
          wrapperCol={{ span: '7' }}>
          <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@max58r@allowSignBack`}
            display="switch"
            value={allowSignBack}
            onChange={(value) => {
              flag = value == '1';
              meetingDialog.setScreenParams({ allowSignBack: value }, () => {
                this.props.onChange && this.props.onChange(state);
              });
            }} />
        </WeaFormItem>
      )
    })
    flag && items.push({
      com:(
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4kmy4w@afterSignCanBack`}
          className={'defaultAllowSignTime'}
          label={getLabel(521097, '允许签退时间')}
          labelCol={{ span: '6', offset: '3' }}
          wrapperCol={{ span: '7' }}>
          <div style={{width:'230px'}}>
          {<span className='meeting-sign'>{getLabel('383592','会议签到')}</span>}
          <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@dr9qix@afterSignCanBack`} 
            value={afterSignCanBack}
            onChange={(v) => {
              meetingDialog.setScreenParams({ afterSignCanBack: v }, () => {
                this.props.onChange && this.props.onChange(state);
              });
            }}
          />
          {<span className='canchange'>{getLabel('520923','分钟后才能签退') }</span>}
          </div>
        </WeaFormItem>
      )
    })
    flag && items.push({
      com:(
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@r29aln@defaultAllowSignBackTime`}
          className={'defaultAllowSignBackTime'}
          label={''}
          labelCol={{ span: '6', offset: '3' }}
          wrapperCol={{ span: '7' }}>
          <div style={{width:'230px'}}>
          {<span className='meeting-sign'>{getLabel('509652','会议结束')}</span>}
          <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@vzws8c@defaultAllowSignBackTime`} 
            value={defaultAllowSignBackTime}
            onChange={(v) => {
              meetingDialog.setScreenParams({ defaultAllowSignBackTime: v }, () => {
                this.props.onChange && this.props.onChange(state);
              });
            }}
          />
          {<span className='canchange'>{getLabel('509653','分钟后不能签退') }</span>}{this.getHelpfunTip('2')}
          </div>
        </WeaFormItem>
      )
    })
    if (type == 'create' ||type == 'edit'|| isSignSetShow) {
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@4mn8e4@isSignSetShow`} needTigger={true} col={1} title={getLabel(521028,'基本信息设置')} showGroup={true} items={items} />)
    }
    items = [];
    items.push({
      com: (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@wx5xtk@bgColor`}
          label={getLabel(2077, '背景颜色')}
          labelCol={{ span: '6', offset: '3' }}
          wrapperCol={{ span: '7' }}>
          <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@w385gp@bgColor`}
            value={bgcolor}
            onChange={(v) => {
              // this.setState({bgcolor: v}, () => {
              //   let state = {...this.state};
              //   this.props.onChange && this.props.onChange(state);
              // });
              meetingDialog.setScreenParams({ bgcolor: v }, () => {
                this.props.onChange && this.props.onChange(state);
              });
            }}
          />
        </WeaFormItem>
      ),
      colSpan: 1
    })
    items.push({
      com: (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@wedubh@bgimg`}
          label={getLabel(19074, '背景图片')}
          labelCol={{ span: '6', offset: '3' }}
          wrapperCol={{ span: '12' }}>
          {
            bgimg ?
              <div className="hrm-avatar">
                <img src={`${bgimgLoadlink}`} />
                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@kq3g3p@deleteImg`} type="cross-circle-o" title={getLabel(16075, '删除图片')} onClick={() => meetingDialog.setScreenParams({ bgimg: '', bgimgLoadlink: '' })} />
              </div>
              : !uploadShow ?
                <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@kmt2d3@bgimg`}
                  maxUploadSize={cfg.maxUploadSize}//最大上传大小限制，单位为MB
                  mixUploadSize={cfg.mixUploadSize}//最大上传大小限制，单位为MB
                  uploadUrl={`/api/doc/upload/uploadFile?category=${cfg.category}`}
                  category={`${cfg.category}`}//文件上传目录
                  onChange={(ids, list) => {
                    // this.setState({bgimg: ids[0]}, () => {
                    //   let state = {...this.state};
                    //   this.props.onChange && this.props.onChange(state);
                    // });
                    meetingDialog.setScreenParams({ bgimg: ids[0], bgimgLoadlink: list[0]['loadlink'] }, () => {
                      this.props.onChange && this.props.onChange(state);
                    });
                  }}
                  ref={'meetingUploadScreen'}
                  uploadId={"_meetingUploadScreen"}//上传组件标识，同时生成隐藏域 id
                  autoUpload={true}//自动上传
                >
                  <span className="icon-coms-AddTo" style={{ fontSize: '50px', cursor: 'pointer' }} />
                </WeaUpload>
                : (
                  <div style={{ display: 'inline-block' }}>
                    <span style={{ color: '#FF0000' }}>{getLabel(20476, '附件存放目录未设置！')}</span>
                  </div>
                )
          }
          <div style={{ paddingTop: '8px' }}>{getLabel(384786, '（建议按实际投影分辨率上传图片）')}</div>
        </WeaFormItem>
      ),
      colSpan: 1
    })
    items.push({
      com: (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@t5sfo3@fontcolor`}
          label={getLabel(2076, '字体颜色')}
          labelCol={{ span: '6', offset: '3' }}
          wrapperCol={{ span: '7' }}>

          <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@yb3fic@fontcolor`}
            value={fontcolor}
            onChange={(v) => {
              // this.setState({fontcolor: v}, () => {
              //   let state = {...this.state};
              //   this.props.onChange && this.props.onChange(state);
              // });
              meetingDialog.setScreenParams({ fontcolor: v }, () => {
                this.props.onChange && this.props.onChange(state);
              });
            }}
          />
        </WeaFormItem>
      ),
      colSpan: 1
    })

    items.push({
      com: (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@e93vw7@fontsize`}
          label={getLabel(84212, '字体大小')}
          labelCol={{ span: '6', offset: '3' }}
          wrapperCol={{ span: '7' }}>
          <InputNumber ecId={`${this && this.props && this.props.ecId || ''}_InputNumber@hv6cj5@fontsize`} min={12} max={100} defaultValue={16}
            value={fontsize}
            onChange={(v) => {
              // this.setState({fontsize: v}, () => {
              //   let state = {...this.state};
              //   this.props.onChange && this.props.onChange(state)
              // });
              meetingDialog.setScreenParams({ fontsize: v }, () => {
                this.props.onChange && this.props.onChange(state)
              });
            }}
          />
        </WeaFormItem>
      ),
      colSpan: 1
    })

    items.push({
      com: (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@7vocvu@showhead`}
          label={getLabel(81563, '显示头像')}
          labelCol={{ span: '6', offset: '3' }}
          wrapperCol={{ span: '7' }}>
          <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@fcd08g@showhead`}
            display="switch"
            value={showhead}
            onChange={(value) => {
              // this.setState({showhead: value}, () => {
              //   let state = {...this.state};
              //   this.props.onChange && this.props.onChange(state)
              // });
              meetingDialog.setScreenParams({ showhead: value }, () => {
                this.props.onChange && this.props.onChange(state);
              });
            }} />
        </WeaFormItem>
      ),
      colSpan: 1
    })

    items.push({
      com: (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@gmaxs9@showdep`}
          label={getLabel(384787, '显示部门')}
          labelCol={{ span: '6', offset: '3' }}
          wrapperCol={{ span: '7' }}>
          <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@q8z481@showdep`}
            display="switch"
            value={showdep}
            onChange={(value) => {
              // this.setState({showdep: value}, () => {
              //   let state = {...this.state};
              //   this.props.onChange && this.props.onChange(state);
              // })
              meetingDialog.setScreenParams({ showdep: value }, () => {
                this.props.onChange && this.props.onChange(state);
              });
            }} />
        </WeaFormItem>
      ),
      colSpan: 1
    })

    items.push({
      com: (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@njz570@showsub`}
          label={getLabel(384788, '显示分部')}
          labelCol={{ span: '6', offset: '3' }}
          wrapperCol={{ span: '7' }}>
          <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@88mxfl@showsub`}
            display="switch"
            value={showsub}
            onChange={(value) => {
              // this.setState({showsub: value}, () => {
              //   let state = {...this.state};
              //   this.props.onChange && this.props.onChange(state)
              // });
              meetingDialog.setScreenParams({ showsub: value }, () => {
                this.props.onChange && this.props.onChange(state);
              });
            }} />
        </WeaFormItem>
      ),
      colSpan: 1
    })

    items.push({
      com: (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@em8clr@shownum`}
          label={getLabel(514457, '显示签到统计')}
          labelCol={{ span: '6', offset: '3' }}
          wrapperCol={{ span: '7' }}>

          <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@9te3ky@shownum`}
            display="switch"
            value={shownum}
            onChange={(value) => {
              // this.setState({shownum: value}, () => {
              //   let state = {...this.state};
              //   this.props.onChange && this.props.onChange(state)
              // });
              meetingDialog.setScreenParams({ shownum: value }, () => {
                this.props.onChange && this.props.onChange(state);
              });
            }} />
        </WeaFormItem>
      ),
      colSpan: 1
    })

    items.push({
      com: (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@8yyip9@showtitle`}
          label={getLabel('32351', '显示标题')}
          labelCol={{ span: '6', offset: '3' }}
          wrapperCol={{ span: '7' }}>

          <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@ab9dx7@showtitle`}
            display="switch"
            value={showtitle}
            onChange={(value) => {
              meetingDialog.setScreenParams({ showtitle: value }, () => {
                this.props.onChange && this.props.onChange(state);
              });
            }} />
        </WeaFormItem>
      ),
      colSpan: 1
    })
    if (type == 'create' ||type == 'edit' || isScreenShow) {
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@776chz@signScreenSet`} needTigger={true} col={1} title={getLabel(521027,'大屏签到设置')} showGroup={true} items={items} />)
    }
    return group;
  }

  render() {
    return (
      <div className="meeting-screen">
        {this.getSearchs()}
      </div>
    )
  }

}